<template>
    <div>
        <!-- 弹框 -->
        <el-dialog title="会员列表" v-model="props.isShow" center :before-close="beforeClose">
            <el-form :model="memberForm" ref="memberRef">
                <el-form-item label="会员编号" :label-width="formLabelWidth">
                    <el-input v-model="memberForm.uid" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称" :label-width="formLabelWidth">
                    <el-input v-model="memberForm.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="memberForm.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="memberForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status" :label-width="formLabelWidth">
                    <el-switch v-model="memberForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel(memberRef)">取消</el-button>
                    <el-button type="primary" @click="sure(memberRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang='ts' setup>
import { defineProps, defineEmits, ref, defineExpose } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { memberEdit, memberInfo } from '../../request/api'
import { useStore } from 'vuex'
let store = useStore()

//id的值先为0
var newId = 0

//父传子 接收数据
let props = defineProps({
    isShow: Boolean,
    isAdd: Boolean
})

//子传父
let emit = defineEmits(['cancel'])

//表单对象
let memberForm = ref({
    uid: '',//会员编号，必填项
    nickname: '',//昵称
    phone: '',//手机号
    password: '',//密码
    status: 1,//状态1正常2禁用
})

//封装一个确定事件
let memberRef = ref<FormInstance>()

//封装一个数据回显
const lookup = (uid: number) => {
    memberInfo({ uid }).then((res: any) => {
        // console.log(id);    
        memberForm.value = res.list
        // menuForm.value.id = id
        // console.log(res);
        newId = uid
    })
}

//关闭x事件
const beforeClose = (done: any) => {
    done()
    cancel(memberRef.value)
}
//封装一个取消事件
const cancel = (formEl?: FormInstance | undefined) => {
    emit('cancel', false)
    if (!formEl) return
    memberForm.value = {
        uid: '',//会员编号，必填项
        nickname: '',//昵称
        phone: '',//手机号
        password: '',//密码
        status: 1,//状态1正常2禁用
    }
    //清除表单验证
    formEl.resetFields()
}

const sure = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((val) => {
        if (val) {
            // console.log(memberForm.value, '表单对象');
            if (props.isAdd) {
                memberEdit({ ...memberForm.value, uid: newId }).then(res => {
                    if (res.code == 200) {
                        // console.log(memberForm.value,'111');
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                        store.dispatch('member/getMemberListAction')
                        cancel(formEl)
                    } else {
                        ElMessage.error(res.msg)
                    }
                })
            }
        }
    })
}

const formLabelWidth = '120px'

defineExpose({
    lookup
})
</script>
<style lang='less' scoped></style>